<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大米商城</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .site-topbar {
            /*width: 100%;*/
            background-color: #333;
            font-size: 12px;
        }

        .site-topbar-container {

        }

        .topbar-nav {
            width: 50%;
            /*border: 1px red solid;*/
            margin-left: 18%;
            float: left;
        }

        .topbar-nav li {
            display: inline-block;
            float: left;
            margin-right: 20px;
        }

        .site-topbar a {
            color: #b0b0b0;
            text-decoration: none;
            line-height: 40px;
        }

        .site-topbar a:hover {
            color: #fff;
            font-size: 12px;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .topbar-userinfo {
            /*border: 1px red solid;*/
            float: left;
        }

        .topbar-userinfo li {
            float: left;
            display: inline-block;
            margin-right: 20px;
        }

        .topbar-cart {
            float: left;
            /*border: 1px red solid;*/
            background-color: #423f3f;
        }

        .topbar-cart a {
            margin-left: 10px;
            margin-right: 10px;
        }

        .site-header {
            height: 100px;
            /*border: 1px red solid;*/
        }

        .site-header .logo {
            /*border: 1px red solid;*/
            width: 56px;
            height: 56px;
            margin-top: 22px;
            margin-left: 18%;
            float: left;
        }

        .logo img {
            width: 100%;
        }

        .header-nav {
            /*border: 1px red solid;*/
            margin-top: 42px;
            margin-left: 200px;
            float: left;
        }

        .header-nav li {
            float: left;
            display: inline-block;
            margin-right: 20px;
        }

        .header-nav a {
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .header-nav a:hover {
            color: #ff6700;
        }

        .header-search {
            float: left;
            border: 1px lightgray solid;
            margin-top: 25px;
            margin-left: 50px;
        }

        .header-search input {
            border: none;
            height: 50px;
        }

        #search-text {
            width: 200px;
        }

        #search-button {
            margin-left: 0;
            padding-right: 0;
            border-left: 1px lightgray solid;
            background-color: white;
            width: 50px;
        }

        .home-page {
            margin-left: 17%;
            width: 1250px;
        }

        .home-page .up {
            height: 460px;
            /*border: 1px red solid;*/
        }

        .home-page .up .left {
            height: 100%;
            width: 235px;
            /*border: 1px red solid;*/
            float: left;
            font-size: 14px;


        }

        .home-page .up .left li {
            /*display: inline-block;*/
            text-decoration: none;
            width: 100%;
            height: 46px;
            /*border: 1px red solid;*/
            list-style: none;
            background-color: rgb(159, 157, 158);
        }

        .home-page .up .left a {
            display: inline-block;
            /*border: 1px red solid;*/
            text-decoration: none;
            color: #ffffff;
            margin-left: 10px;
            margin-top: 15px;
        }

        .home-page .up .left span {
            display: inline-block;
            /*border: 1px red solid;*/
            color: rgba(255, 255, 255, 0.7);
            float: right;
            font-size: 24px;
            margin-right: 10px;
            margin-top: 8px;
        }

        .home-page .up .left li:hover {
            background-color: #ff6700;
        }

        .home-page .up .right {
            height: 100%;
            width: 1000px;
            /*border: 1px red solid;*/
            float: right;
        }

        .home-page .down {
            height: 175px;
            margin-top: 10px;
            /*border: 1px red solid;*/
        }

        .home-page .down .left {
            height: 100%;
            width: 235px;
            float: left;
        }

        .home-page .down .right {
            height: 100%;
            width: 1000px;
            float: right;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div>
    <div class="header">
        <div class="site-topbar">
            <div class="site-topbar-container clearfix">
                <div class="topbar-nav">
                    <ul>
                        <li><a href="https://www.mi.com/">小米官网</a></li>
                        <li><a href="https://www.mi.com/shop">小米商城</a></li>
                        <li><a href="https://iot.mi.com/">MIUI</a></li>
                        <li><a href="https://iot.mi.com/">LoT</a></li>
                        <li><a href="https://i.mi.com/">天星科技</a></li>
                        <li><a href="https://youpin.mi.com/">有品</a></li>
                        <li><a href="https://xiaoai.mi.com/">小爱开发平台</a></li>
                        <li><a href="https://qiye.mi.com/">企业团购</a></li>
                        <li><a href="https://www.mi.com/aptitude/list/?id=88">资质证照</a></li>
                        <li><a href="https://www.mi.com/aptitude/list/">协议规则</a></li>
                        <li><a href="https://www.mi.com/appdownload/">下载app</a></li>
                        <li><a href="https://www.mi.com/v">Select Location</a></li>
                    </ul>
                </div>
                <div class="topbar-userinfo">
                    <ul>
                        <li><a href="">登录</a></li>
                        <li><a href="">注册</a></li>
                        <li><a href="">消息通知</a></li>
                    </ul>
                </div>
                <div class="topbar-cart">
                    <a href="https://www.mi.com/v">购物车 (0)</a>
                </div>
            </div>
        </div>
        <div class="site-header">
            <div class="logo">
                <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"></a>
            </div>
            <div class="header-nav">
                <ul>
                    <li><a href="">Xiaomi手机</a></li>
                    <li><a href="">Redmi手机</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">服务中心</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="header-search">
                <form>
                    <a href=""><input id="search-text" type="search"></a>
                    <a href=""><input id="search-button" type="submit" value="搜索"></a>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="home-page clearfix">
    <div class="up">
        <div class="left">
            <ul>
                <li><a href="">手机</a><span>></span></li>
                <li><a href="">电视</a><span>></span></li>
                <li><a href="">家电</a><span>></span></li>
                <li><a href="">笔记本 平板</a><span>></span></li>
                <li><a href="">出行 穿戴</a><span>></span></li>
                <li><a href="">耳机 音响</a><span>></span></li>
                <li><a href="">健康 儿童</a><span>></span></li>
                <li><a href="">生活 箱包</a><span>></span></li>
                <li><a href="">智能 路由器</a><span>></span></li>
                <li><a href="">电影 配件</a><span>></span></li>
            </ul>
        </div>
        <div class="right">
            <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7f46857e9876f168ae660dbfb0909169.jpeg?h=460&f=webp&q=90">
                    </div>
                    <div class="swiper-slide"><img
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4654880fb3266820ac4f82edeee4d80.jpg?h=460&f=webp&q=90">
                    </div>
                    <div class="swiper-slide"><img
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0942f8338bc19a2cde9394479fc123c8.jpg?h=460&f=webp&q=90">
                    </div>
                    <div class="swiper-slide"><img
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66eff8e22a48ded4854017b25cbf631.jpeg?h=460&f=webp&q=90">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <!-- Initialize Swiper -->
                <script>
                    var mySwiper = new Swiper('.swiper', {
                        loop: true, // 循环模式选项
                        disableOnInteraction: false,
                        autoplay: true,
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        }
                    })
                </script>
            </div>
        </div>
        <div class="down">
            <div class="left">

            </div>
            <div class="right">

            </div>
        </div>
    </div>
</div>
</body>
</html>